<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>案例一:动态数据的添加和删除</title>
</head>

<body>

<center>
    <br><br>
    <h4>添加用户<h4/>
        姓名: <input type="text" name="name" id="name"/>&nbsp;&nbsp;
        邮箱: <input type="text" name="email" id="email"/>&nbsp;&nbsp;
        电话: <input type="text" name="tel" id="tel"/><br><br>
        <!-- 该按钮的写法支持样式也可以添加图片等 -->
        <button id="addUser">添加</button>
        <br><br>
        <hr>
        <br><br>
        <table id="usertable" border="1" cellpadding="5" cellspacing=0>
            <thead>
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>eddy</td>
                <td>eddy@163.com</td>
                <td>18666123434</td>
                <td><a href="deleteUser?id=Jack">Delete</a></td>
            </tr>
            </tbody>
        </table>
</center>


<script>
    window.document.getElementById("addUser").onclick = function () {
        // alert("添加");
        // 1. 获取输入框输入的数据
        var name = window.document.getElementById("name").value;
        var email = window.document.getElementById("email").value;
        var tel = window.document.getElementById("tel").value;

        // alert( name+" "+email+" "+tel);

        // 2. 创建三个td对象
        var nameTD = window.document.createElement("td");
        var nameVal = window.document.createTextNode(name);
        nameTD.appendChild(nameVal)

        var emailTD = window.document.createElement("td");
        var emailVal = window.document.createTextNode(email);
        emailTD.appendChild(emailVal)

        var telTD = window.document.createElement("td");
        var telVal = window.document.createTextNode(tel);
        telTD.appendChild(telVal)

        // 3. 创建操作数据的td对象
        var optionTD = window.document.createElement("td");
        // <td><a href='#'>Delete</a></td>
        optionTD.innerHTML = "<a href='#'>Delete</a>";

        // 4. 创建一个tr对象
        var tr = window.document.createElement("tr");

        // 5. 构建tr对象
        tr.appendChild(nameTD);
        tr.appendChild(emailTD);
        tr.appendChild(telTD);
        tr.appendChild(optionTD);

        // 6. 添加tr到table
        var table = window.document.getElementById("usertable");
        table.appendChild(tr);

        // 7. 获取该行的a对象，并绑定单击事件进行行数据的删除
        optionTD.firstChild.onclick = function () {
            // 删除一行数据tr  this代表的是当前单击的超链接对象
            // 通过返回值指定是否进入a指定的href地址
            return deleteTR(this);
        };
    };

    // 定义一个删除指定行的函数
    function deleteTR(ele) {
        // alert(ele.nodeName);
        // 根据关系获取第一个td中的文本值即用户名
        var name = ele.parentNode.parentNode.firstChild.firstChild.nodeValue;
        var tag = window.confirm("您真的要删除【" + name + "】用户信息吗?");
        if (tag) {
            //alert("确定");
            // 先获取要删除的行对象
            var tr = ele.parentNode.parentNode
            // 再获取要删除的tr的table对象
            var table = tr.parentNode;
            // 删除
            table.removeChild(tr);
            return false;
        } else {
            //alert("取消");
            return false;
        }
    }

</script>
</body>
</html>
